<template>
  <div class="app-container" v-loading="pageLoading">
    <div class="filter-container">
      <el-input style="width: 200px" placeholder="输入检验单号" clearable prefix-icon="el-icon-search" class="filter-item"
        @change="research" @keyup.enter.native="research" @clear="research" v-model="query.queryString.inspected_no">
      </el-input>
      <el-input style="width: 200px" placeholder="输入送货单号" clearable prefix-icon="el-icon-search" class="filter-item"
        @change="research" @keyup.enter.native="research" @clear="research" v-model="query.queryString.delivery_order">
      </el-input>
      <el-input style="width: 200px" placeholder="输入收货单号" clearable prefix-icon="el-icon-search" class="filter-item"
        @change="research" @keyup.enter.native="research" @clear="research" v-model="query.queryString.order_no">
      </el-input>
      <el-select style="width: 150px" class="filter-item" placeholder="检验状态" clearable
        v-model="query.queryString.inspected_progress" @change="research">
        <el-option label="待检验" value="0"></el-option>
        <el-option label="检验中" value="1"></el-option>
        <el-option label="已完成" value="2"></el-option>
        <el-option label="免检" value="3"></el-option>
      </el-select>
      <el-select style="width: 150px" class="filter-item" placeholder="检验结果" clearable
        v-model="query.queryString.iqc_results" @change="research">
        <el-option label="OK" value="OK"></el-option>
        <el-option label="NG" value="NG"></el-option>
      </el-select>
      <el-button type="success" plain @click="research" class="filter-item">查询</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns">
      <template v-slot:content="v">
        <template v-if="v.key ==='inspected_progress'">
          <span class="text-label" :class="statusClass[v.row['inspected_progress']]" @click="handleBs(v.row)">
            {{ status[v.row['inspected_progress']] }}
          </span>
        </template>
        <template v-else-if="v.key ==='iqc_results' && v.row['iqc_results']">
          <span class="text-label" :class="v.row['iqc_results']=='OK'?'bg-green':'bg-red'" @click="handleBs(v.row)">
            {{ v.row['iqc_results'] }}
          </span>
        </template>
      </template>
      <template v-slot:operation="v">
        <a href="#" class="text-blue" @click.prevent.stop="editItem(v.row)" v-permission="'ipqc.edit'">维护</a>
        <a href="#" class="text-red" @click.prevent.stop="deleteItem(v.row)" v-permission="'ipqc.edit'">撤回</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>

  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'

export default {
  mixins: [commonMixin],
  name: 'ipqc',
  data: function () {
    return {
      api: this.$api.iqc,
      apiEdit: this.$api.iqc + 'update',
      apiDelete: this.$api.iqc + 'goback',
      pageLoading: false,
      submitLoading: false,
      query: {
        page: 1,
        size: 10,
        queryString: {},
      },
      tableProps: {
        hideOperations: false,
        opsColWith: 120, //不定义默认80
      },
      list: [],
      name: '来料检验',
      columns: [
        { title: '检验单号', key: 'inspected_no', width: 140 },
        { title: '送货单号', key: 'delivery_order', width: 140 },
        { title: '收货单号', key: 'order_no', width: 180 },
        { title: '物料号', key: 'key_part_no', width: 100 },
        { title: '物料名称', key: 'key_part_name', width: 140 },
        { title: '供应商编号', key: 'vendor_code', width: 90 },
        { title: '供应商名称', key: 'vendor_name', width: 140 },
        { title: '来料总数量', key: 'total_staging_qty', width: 140 },
        { title: '应抽数量', key: 'require_inspected_qty', width: 80 },
        { title: '实抽数量', key: 'act_inspected_qty', width: 80 },
        { title: '检验状态', key: 'inspected_progress', width: 80 },
        { title: '检验结果', key: 'iqc_results', width: 70 },
        { title: '结果说明', key: 'result_desc', width: 140 },
        { title: '来料批次', key: 'lot_date_code', width: 140 },
        { title: '创建时间', key: 'create_time', width: 140 },
      ],
      status: { 0: '待检验', 1: '检验中', 2: '已完成', 3: '免检' },
      statusClass: { 0: 'bg-gray', 1: 'bg-green', 2: 'bg-yellow', 3: 'bg-purple' },
      fields: [
        {
          title: '实抽数量',
          key: 'act_inspected_qty',
          name: 'number',
          required: true,
          props: { min: 0, step: 100 },
        },
        {
          title: '检验结果',
          key: 'iqc_results',
          name: 'select',
          options: [
            { label: 'OK', value: 'OK' },
            { label: 'NG', value: 'NG' },
          ],
          props: { clearable: true },
          required: true,
        },
        {
          title: '检验状态',
          key: 'inspected_progress',
          name: 'select',
          tips: '',
          options: [
            { label: '待检验', value: '0', disabled: true },
            { label: '检验中', value: '1' },
            { label: '已完成', value: '2' },
            { label: '免检', value: '3', disabled: true },
          ],
          props: { clearable: true },
          required: true,
        },
      ],
      editFormVisible: false,
    }
  },

  methods: {
    clear() {
      this.query.page = 1
      this.total = 0
      this.list = []
    },
    formatQuery(query) {
      let tmp = _.cloneDeep(query)
      tmp.queryString = JSON.stringify(tmp.queryString)
      return tmp
    },
  },
  computed: {},
  created: function () {
    this.getList()
  },
}
</script>

<style scoped>
</style>
